import React from "react";
import { useNavigate } from "react-router-dom";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import { TabBar } from "antd-mobile";
import styles from './Index.module.css'
function Index() {
  const nav = useNavigate();
  const tabs = [
    {
      key: "/home2",
      title: "诊疗首页",
      icon: <AppOutline />,
    },
    {
      key: "/wei",
      title: "微官网",
      icon: <UnorderedListOutline />,
      badge: "5",
    },
    {
      key: "/message",
      title: "消息中心",
      icon: (active: boolean) =>
        active ? <MessageFill /> : <MessageOutline />,
      badge: "99+",
    },
    {
      key: "/my",
      title: "我的",
      icon: <UserOutline />,
    },
  ];
  return (
    <div>
      <div className={styles.footer}>
        <TabBar className={styles.tabbar} onChange={(key) => nav(key)}>
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
}

export default Index;
